<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">

  <title>Navbars | Remark Admin Template</title>

  <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
  <link rel="shortcut icon" href="../assets/images/favicon.ico">

  <!-- Stylesheets -->
  <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
  <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

  <!-- Skin tools (demo site only) -->
  <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
  <script src="../assets/js/sections/skintools.min.js"></script>

  <!-- Plugins -->
  <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">

  <!-- Page -->
  <link rel="stylesheet" href="../assets/examples/css/structure/navbars.min.css?v2.2.0">

  <!-- Fonts -->
  <link rel="stylesheet" href="../../global/fonts/web-icons/web-icons.min.css?v2.2.0">
  <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,300italic'>


  <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

  <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

  <!-- Scripts -->
  <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
  <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
  <script>
    Breakpoints();
  </script>
</head>
<body>
  <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
      data-toggle="menubar">
        <span class="sr-only">Toggle navigation</span>
        <span class="hamburger-bar"></span>
      </button>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
      data-toggle="collapse">
        <i class="icon wb-more-horizontal" aria-hidden="true"></i>
      </button>
      <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
        <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
        <span class="navbar-brand-text hidden-xs"> Remark</span>
      </div>
      <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
      data-toggle="collapse">
        <span class="sr-only">Toggle Search</span>
        <i class="icon wb-search" aria-hidden="true"></i>
      </button>
    </div>

    <div class="navbar-container container-fluid">
      <!-- Navbar Collapse -->
      <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
        <!-- Navbar Toolbar -->
        <ul class="nav navbar-toolbar">
          <li class="hidden-float" id="toggleMenubar">
            <a data-toggle="menubar" href="#" role="button">
              <i class="icon hamburger hamburger-arrow-left">
                  <span class="sr-only">Toggle menubar</span>
                  <span class="hamburger-bar"></span>
                </i>
            </a>
          </li>
          <li class="hidden-xs" id="toggleFullscreen">
            <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
              <span class="sr-only">Toggle fullscreen</span>
            </a>
          </li>
          <li class="hidden-float">
            <a class="icon wb-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
            role="button">
              <span class="sr-only">Toggle Search</span>
            </a>
          </li>
          <li class="dropdown dropdown-fw dropdown-mega">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="fade" role="button">Mega <i class="icon wb-chevron-down-mini" aria-hidden="true"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <div class="mega-content">
                  <div class="row">
                    <div class="col-sm-4">
                      <h5>UI Kit</h5>
                      <ul class="blocks-2">
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/animation.html">Animation</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../uikit/buttons.html">Buttons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../uikit/colors.html">Colors</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../uikit/dropdowns.html">Dropdowns</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../uikit/icons.html">Icons</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/lightbox.html">Lightbox</a>
                            </li>
                          </ul>
                        </li>
                        <li class="mega-menu margin-0">
                          <ul class="list-icons">
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../uikit/modals.html">Modals</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../uikit/panel-structure.html">Panels</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="overlay.html">Overlay</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../uikit/tooltip-popover.html ">Tooltips</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../advanced/scrollable.html">Scrollable</a>
                            </li>
                            <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                              <a
                              href="../uikit/typography.html">Typography</a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5>Media
                        <span class="badge badge-success">4</span>
                      </h5>
                      <ul class="blocks-3">
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                        <li>
                          <a class="thumbnail margin-0" href="javascript:void(0)">
                            <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                            />
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <h5 class="margin-bottom-0">Accordion</h5>
                      <!-- Accordion -->
                      <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                      role="tablist">
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                            <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                            aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                Collapsible Group Item #1
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                          role="tabpanel">
                            <div class="panel-body">
                              De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                              congressus ostendit alienae, voluptati ornateque
                              accusamus clamat reperietur convicia albucius.
                            </div>
                          </div>
                        </div>
                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseTwo">
                                Collapsible Group Item #2
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                          role="tabpanel">
                            <div class="panel-body">
                              Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                              loco ignavi, credo videretur multoque choro fatemur
                              mortis animus adoptionem, bello statuat expediunt
                              naturales.
                            </div>
                          </div>
                        </div>

                        <div class="panel">
                          <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                            <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                            data-parent="#siteMegaAccordion" aria-expanded="false"
                            aria-controls="siteMegaCollapseThree">
                                Collapsible Group Item #3
                              </a>
                          </div>
                          <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                          role="tabpanel">
                            <div class="panel-body">
                              Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                              suscipere. Desiderat magnum, contenta poena desiderant
                              concederetur menandri damna disputandum corporum.
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Accordion -->
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <!-- End Navbar Toolbar -->

        <!-- Navbar Toolbar Right -->
        <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
            aria-expanded="false" role="button">
              <span class="flag-icon flag-icon-us"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-gb"></span> English</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-fr"></span> French</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-cn"></span> Chinese</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-de"></span> German</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem">
                  <span class="flag-icon flag-icon-nl"></span> Dutch</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
            data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
              </li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
              </li>
              <li class="divider" role="presentation"></li>
              <li role="presentation">
                <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-bell" aria-hidden="true"></i>
              <span class="badge badge-danger up">5</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>NOTIFICATIONS</h5>
                <span class="label label-round label-danger">New 5</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">A new order has been placed</h6>
                          <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Completed the task</h6>
                          <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Settings updated</h6>
                          <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Event started</h6>
                          <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Message received</h6>
                          <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    All notifications
                  </a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
            data-animation="scale-up" role="button">
              <i class="icon wb-envelope" aria-hidden="true"></i>
              <span class="badge badge-info up">3</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
              <li class="dropdown-menu-header" role="presentation">
                <h5>MESSAGES</h5>
                <span class="label label-round label-info">New 3</span>
              </li>

              <li class="list-group" role="presentation">
                <div data-role="container">
                  <div data-role="content">
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Mary Adams</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                          </div>
                          <div class="media-detail">Anyways, i would like just do it</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Caleb Richards</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                          </div>
                          <div class="media-detail">I checheck the document. But there seems</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">June Lane</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                          </div>
                          <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                        </div>
                      </div>
                    </a>
                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                      <div class="media">
                        <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                        </div>
                        <div class="media-body">
                          <h6 class="media-heading">Edward Fletcher</h6>
                          <div class="media-meta">
                            <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                          </div>
                          <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </li>
              <li class="dropdown-menu-footer" role="presentation">
                <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                  <i class="icon wb-settings" aria-hidden="true"></i>
                </a>
                <a href="javascript:void(0)" role="menuitem">
                    See all messages
                  </a>
              </li>
            </ul>
          </li>
          <li id="toggleChat">
            <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
              <i class="icon wb-chat" aria-hidden="true"></i>
            </a>
          </li>
        </ul>
        <!-- End Navbar Toolbar Right -->
      </div>
      <!-- End Navbar Collapse -->

      <!-- Site Navbar Seach -->
      <div class="collapse navbar-search-overlap" id="site-navbar-search">
        <form role="search">
          <div class="form-group">
            <div class="input-search">
              <i class="input-search-icon wb-search" aria-hidden="true"></i>
              <input type="text" class="form-control" name="site-search" placeholder="Search...">
              <button type="button" class="input-search-close icon wb-close" data-target="#site-navbar-search"
              data-toggle="collapse" aria-label="Close"></button>
            </div>
          </div>
        </form>
      </div>
      <!-- End Site Navbar Seach -->
    </div>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body">
      <div>
        <div>
          <ul class="site-menu">
            <li class="site-menu-category">General</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-dashboard" aria-hidden="true"></i>
                <span class="site-menu-title">Dashboard</span>
                <div class="site-menu-badge">
                  <span class="badge badge-success">3</span>
                </div>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../index.html">
                    <span class="site-menu-title">Dashboard v1</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/v2.html">
                    <span class="site-menu-title">Dashboard v2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/ecommerce.html">
                    <span class="site-menu-title">Ecommerce</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/analytics.html">
                    <span class="site-menu-title">Analytics</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../dashboard/team.html">
                    <span class="site-menu-title">Team</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-layout" aria-hidden="true"></i>
                <span class="site-menu-title">Layouts</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed.html">
                    <span class="site-menu-title">Menu Collapsed</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-collapsed-alt.html">
                    <span class="site-menu-title">Menu Collapsed Alt</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menu-expended.html">
                    <span class="site-menu-title">Menu Expended</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/grids.html">
                    <span class="site-menu-title">Grid Scaffolding</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/layout-grid.html">
                    <span class="site-menu-title">Layout Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/headers.html">
                    <span class="site-menu-title">Different Headers</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/panel-transition.html">
                    <span class="site-menu-title">Panel Transition</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/boxed.html">
                    <span class="site-menu-title">Boxed Layout</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/two-columns.html">
                    <span class="site-menu-title">Two Columns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-flipped.html">
                    <span class="site-menu-title">Menubar Flipped</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                    <span class="site-menu-title">Menubar Native Scrolling</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/bordered-header.html">
                    <span class="site-menu-title">Bordered Header</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                    <span class="site-menu-title">Page Aside Fixed</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-file" aria-hidden="true"></i>
                <span class="site-menu-title">Pages</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Errors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-400.html">
                        <span class="site-menu-title">400</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-403.html">
                        <span class="site-menu-title">403</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-404.html">
                        <span class="site-menu-title">404</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-500.html">
                        <span class="site-menu-title">500</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/error-503.html">
                        <span class="site-menu-title">503</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/faq.html">
                    <span class="site-menu-title">FAQ</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery.html">
                    <span class="site-menu-title">Gallery</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/gallery-grid.html">
                    <span class="site-menu-title">Gallery Grid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/search-result.html">
                    <span class="site-menu-title">Search Result</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Maps</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-google.html">
                        <span class="site-menu-title">Google Maps</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../pages/map-vector.html">
                        <span class="site-menu-title">Vector Maps</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/maintenance.html">
                    <span class="site-menu-title">Maintenance</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/forgot-password.html">
                    <span class="site-menu-title">Forgot Password</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/lockscreen.html">
                    <span class="site-menu-title">Lockscreen</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login.html">
                    <span class="site-menu-title">Login</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register.html">
                    <span class="site-menu-title">Register</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v2.html">
                    <span class="site-menu-title">Login V2</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v2.html">
                    <span class="site-menu-title">Register V2</span>
                    <div class="site-menu-label">
                      <span class="label label-info label-round">new</span>
                    </div>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/login-v3.html">
                    <span class="site-menu-title">Login V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/register-v3.html">
                    <span class="site-menu-title">Register V3</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/user.html">
                    <span class="site-menu-title">User List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/invoice.html">
                    <span class="site-menu-title">Invoice</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/blank.html">
                    <span class="site-menu-title">Blank Page</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/email.html">
                    <span class="site-menu-title">Email</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/code-editor.html">
                    <span class="site-menu-title">Code Editor</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/profile.html">
                    <span class="site-menu-title">Profile</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../pages/site-map.html">
                    <span class="site-menu-title">Sitemap</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Elements</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-bookmark" aria-hidden="true"></i>
                <span class="site-menu-title">Basic UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Panel</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../uikit/panel-structure.html">
                        <span class="site-menu-title">Panel Structure</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../uikit/panel-actions.html">
                        <span class="site-menu-title">Panel Actions</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../uikit/panel-portlets.html">
                        <span class="site-menu-title">Panel Portlets</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/buttons.html">
                    <span class="site-menu-title">Buttons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/dropdowns.html">
                    <span class="site-menu-title">Dropdowns</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/icons.html">
                    <span class="site-menu-title">Icons</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/list.html">
                    <span class="site-menu-title">List</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/tooltip-popover.html">
                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/modals.html">
                    <span class="site-menu-title">Modals</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/tabs-accordions.html">
                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/images.html">
                    <span class="site-menu-title">Images</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/badges-labels.html">
                    <span class="site-menu-title">Badges &amp; Labels</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/progress-bars.html">
                    <span class="site-menu-title">Progress Bars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/carousel.html">
                    <span class="site-menu-title">Carousel</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/typography.html">
                    <span class="site-menu-title">Typography</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/colors.html">
                    <span class="site-menu-title">Colors</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../uikit/utilities.html">
                    <span class="site-menu-title">Utilties</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-hammer" aria-hidden="true"></i>
                <span class="site-menu-title">Advanced UI</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item hidden-xs site-tour-trigger">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Tour</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/animation.html">
                    <span class="site-menu-title">Animation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/highlight.html">
                    <span class="site-menu-title">Highlight</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/lightbox.html">
                    <span class="site-menu-title">Lightbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/scrollable.html">
                    <span class="site-menu-title">Scrollable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/rating.html">
                    <span class="site-menu-title">Rating</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/context-menu.html">
                    <span class="site-menu-title">Context Menu</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/alertify.html">
                    <span class="site-menu-title">Alertify</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/masonry.html">
                    <span class="site-menu-title">Masonry</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/treeview.html">
                    <span class="site-menu-title">Treeview</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/toastr.html">
                    <span class="site-menu-title">Toastr</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-vector.html">
                    <span class="site-menu-title">Vector Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/maps-google.html">
                    <span class="site-menu-title">Google Maps</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/sortable-nestable.html">
                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub active open">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-plugin" aria-hidden="true"></i>
                <span class="site-menu-title">Structure</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="alerts.html">
                    <span class="site-menu-title">Alerts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="ribbon.html">
                    <span class="site-menu-title">Ribbon</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="pricing-tables.html">
                    <span class="site-menu-title">Pricing Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="overlay.html">
                    <span class="site-menu-title">Overlay</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="cover.html">
                    <span class="site-menu-title">Cover</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="timeline-simple.html">
                    <span class="site-menu-title">Simple Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="timeline.html">
                    <span class="site-menu-title">Timeline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="step.html">
                    <span class="site-menu-title">Step</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="comments.html">
                    <span class="site-menu-title">Comments</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="media.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="chat.html">
                    <span class="site-menu-title">Chat</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="testimonials.html">
                    <span class="site-menu-title">Testimonials</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="nav.html">
                    <span class="site-menu-title">Nav</span>
                  </a>
                </li>
                <li class="site-menu-item active">
                  <a class="animsition-link" href="navbars.html">
                    <span class="site-menu-title">Navbars</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="blockquotes.html">
                    <span class="site-menu-title">Blockquotes</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="pagination.html">
                    <span class="site-menu-title">Pagination</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="breadcrumbs.html">
                    <span class="site-menu-title">Breadcrumbs</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-extension" aria-hidden="true"></i>
                <span class="site-menu-title">Widgets</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/statistics.html">
                    <span class="site-menu-title">Statistics Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/data.html">
                    <span class="site-menu-title">Data Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/blog.html">
                    <span class="site-menu-title">Blog Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/chart.html">
                    <span class="site-menu-title">Chart Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/social.html">
                    <span class="site-menu-title">Social Widgets</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../widgets/weather.html">
                    <span class="site-menu-title">Weather Widgets</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-library" aria-hidden="true"></i>
                <span class="site-menu-title">Forms</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/general.html">
                    <span class="site-menu-title">General Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/material.html">
                    <span class="site-menu-title">Material Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/advanced.html">
                    <span class="site-menu-title">Advanced Elements</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/layouts.html">
                    <span class="site-menu-title">Form Layouts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/wizard.html">
                    <span class="site-menu-title">Form Wizard</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/validation.html">
                    <span class="site-menu-title">Form Validation</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/masks.html">
                    <span class="site-menu-title">Form Masks</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/editable.html">
                    <span class="site-menu-title">Form Editable</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Editors</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-summernote.html">
                        <span class="site-menu-title">Summernote</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-markdown.html">
                        <span class="site-menu-title">Markdown</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../forms/editor-ace.html">
                        <span class="site-menu-title">Ace Editor</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/image-cropping.html">
                    <span class="site-menu-title">Image Cropping</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../forms/file-uploads.html">
                    <span class="site-menu-title">File Uploads</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-table" aria-hidden="true"></i>
                <span class="site-menu-title">Tables</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/basic.html">
                    <span class="site-menu-title">Basic Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/bootstrap.html">
                    <span class="site-menu-title">Bootstrap Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/floatthead.html">
                    <span class="site-menu-title">floatThead</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/responsive.html">
                    <span class="site-menu-title">Responsive Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/editable.html">
                    <span class="site-menu-title">Editable Tables</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/jsgrid.html">
                    <span class="site-menu-title">jsGrid</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/footable.html">
                    <span class="site-menu-title">FooTable</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../tables/datatable.html">
                    <span class="site-menu-title">DataTables</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-pie-chart" aria-hidden="true"></i>
                <span class="site-menu-title">Chart</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartjs.html">
                    <span class="site-menu-title">Chart.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/gauges.html">
                    <span class="site-menu-title">Gauges</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/flot.html">
                    <span class="site-menu-title">Flot</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/peity.html">
                    <span class="site-menu-title">Peity</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/sparkline.html">
                    <span class="site-menu-title">Sparkline</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/morris.html">
                    <span class="site-menu-title">Morris</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/chartist.html">
                    <span class="site-menu-title">Chartist.js</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/rickshaw.html">
                    <span class="site-menu-title">Rickshaw</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/pie-progress.html">
                    <span class="site-menu-title">Pie Progress</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../charts/c3.html">
                    <span class="site-menu-title">C3</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Apps</li>
            <li class="site-menu-item has-sub">
              <a href="javascript:void(0)">
                <i class="site-menu-icon wb-grid-4" aria-hidden="true"></i>
                <span class="site-menu-title">Apps</span>
                <span class="site-menu-arrow"></span>
              </a>
              <ul class="site-menu-sub">
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/contacts/contacts.html">
                    <span class="site-menu-title">Contacts</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/calendar/calendar.html">
                    <span class="site-menu-title">Calendar</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/notebook/notebook.html">
                    <span class="site-menu-title">Notebook</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                    <span class="site-menu-title">Taskboard</span>
                  </a>
                </li>
                <li class="site-menu-item has-sub">
                  <a href="javascript:void(0)">
                    <span class="site-menu-title">Documents</span>
                    <span class="site-menu-arrow"></span>
                  </a>
                  <ul class="site-menu-sub">
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/articles.html">
                        <span class="site-menu-title">Articles</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/categories.html">
                        <span class="site-menu-title">Categories</span>
                      </a>
                    </li>
                    <li class="site-menu-item">
                      <a class="animsition-link" href="../apps/documents/article.html">
                        <span class="site-menu-title">Article</span>
                      </a>
                    </li>
                  </ul>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/forum/forum.html">
                    <span class="site-menu-title">Forum</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/message/message.html">
                    <span class="site-menu-title">Message</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/projects/projects.html">
                    <span class="site-menu-title">Projects</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                    <span class="site-menu-title">Mailbox</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/media/overview.html">
                    <span class="site-menu-title">Media</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/work/work.html">
                    <span class="site-menu-title">Work</span>
                  </a>
                </li>
                <li class="site-menu-item">
                  <a class="animsition-link" href="../apps/location/location.html">
                    <span class="site-menu-title">Location</span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="site-menu-category">Angular UI</li>
            <li class="site-menu-item">
              <a class="animsition-link" href="../angular/index.html">
                <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                <span class="site-menu-title">Angular UI</span>
                <div class="site-menu-label">
                  <span class="label label-danger label-round">new</span>
                </div>
              </a>
            </li>
          </ul>

          <div class="site-menubar-section">
            <h5>
              Milestone
              <span class="pull-right">30%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
            </div>
            <h5>
              Release
              <span class="pull-right">60%</span>
            </h5>
            <div class="progress progress-xs">
              <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-menubar-footer">
      <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
      data-original-title="Settings">
        <span class="icon wb-settings" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
        <span class="icon wb-eye-close" aria-hidden="true"></span>
      </a>
      <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
        <span class="icon wb-power" aria-hidden="true"></span>
      </a>
    </div>
  </div>
  <div class="site-gridmenu">
    <div>
      <div>
        <ul>
          <li>
            <a href="../apps/mailbox/mailbox.html">
              <i class="icon wb-envelope"></i>
              <span>Mailbox</span>
            </a>
          </li>
          <li>
            <a href="../apps/calendar/calendar.html">
              <i class="icon wb-calendar"></i>
              <span>Calendar</span>
            </a>
          </li>
          <li>
            <a href="../apps/contacts/contacts.html">
              <i class="icon wb-user"></i>
              <span>Contacts</span>
            </a>
          </li>
          <li>
            <a href="../apps/media/overview.html">
              <i class="icon wb-camera"></i>
              <span>Media</span>
            </a>
          </li>
          <li>
            <a href="../apps/documents/categories.html">
              <i class="icon wb-order"></i>
              <span>Documents</span>
            </a>
          </li>
          <li>
            <a href="../apps/projects/projects.html">
              <i class="icon wb-image"></i>
              <span>Project</span>
            </a>
          </li>
          <li>
            <a href="../apps/forum/forum.html">
              <i class="icon wb-chat-group"></i>
              <span>Forum</span>
            </a>
          </li>
          <li>
            <a href="../index.html">
              <i class="icon wb-dashboard"></i>
              <span>Dashboard</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>


  <!-- Page -->
  <div class="page animsition">
    <div class="page-header">
      <h1 class="page-title">Navbars</h1>
      <ol class="breadcrumb">
        <li><a href="../index.html">Home</a></li>
        <li class="active">Structure</li>
      </ol>
      <div class="page-header-actions">
        <form>
          <div class="input-search input-search-dark">
            <i class="input-search-icon wb-search" aria-hidden="true"></i>
            <input type="text" class="form-control" name="" placeholder="Search...">
          </div>
        </form>
      </div>
    </div>
    <div class="page-content">
      <!-- Example Default -->
      <div class="example-wrap">
        <h4 class="example-title">Default</h4>
        <p>Navbars are responsive meta components that serve as navigation headers
          for your application or site. They begin collapsed (and are toggleable)
          in mobile views and become horizontal as the available viewport width
          increases.</p>
        <p>Justified navbar nav links are currently not supported.</p>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-target="#example-navbar-default-collapse" data-toggle="collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <button type="button" class="navbar-toggle collapsed" data-target="#example-navbar-default-search"
                data-toggle="collapse">
                  <span class="sr-only">Toggle Search</span>
                  <i class="icon wb-search" aria-hidden="true"></i>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Brand</a>
              </div>
              <ul class="nav navbar-nav hidden-float">
                <li>
                  <a href="javascript:void(0)">
                    <i class="icon wb-grid-4" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="hidden-xs">
                  <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
                    <span class="sr-only">Toggle fullscreen</span>
                  </a>
                </li>
                <li class="hidden-float">
                  <a class="icon wb-search" data-toggle="collapse" href="#example-navbar-default-search"
                  role="button">
                    <span class="sr-only">Toggle Search</span>
                  </a>
                </li>
              </ul>
              <div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-default-collapse">
                <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                  <li class="dropdown">
                    <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                      <span class="avatar avatar-online">
                        <img src="../../global/portraits/5.jpg" alt="...">
                        <i></i>
                      </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
                      </li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
                      </li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
                      </li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
                    data-animation="slide-bottom" role="button">
                      <i class="icon wb-bell" aria-hidden="true"></i>
                      <span class="badge badge-danger up">5</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                      <li class="dropdown-menu-header" role="presentation">
                        <h5>NOTIFICATIONS</h5>
                        <span class="label label-round label-danger">New 5</span>
                      </li>

                      <li class="list-group" role="presentation">
                        <div data-role="container">
                          <div data-role="content">
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">A new order has been placed</h6>
                                  <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Completed the task</h6>
                                  <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Settings updated</h6>
                                  <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Event started</h6>
                                  <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Message received</h6>
                                  <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </li>
                      <li class="dropdown-menu-footer" role="presentation">
                        <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                          <i class="icon wb-settings" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0)" role="menuitem">
                        All notifications
                      </a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
                    data-animation="slide-bottom" role="button">
                      <i class="icon wb-envelope" aria-hidden="true"></i>
                      <span class="badge badge-info up">3</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                      <li class="dropdown-menu-header" role="presentation">
                        <h5>MESSAGES</h5>
                        <span class="label label-round label-info">New 3</span>
                      </li>

                      <li class="list-group" role="presentation">
                        <div data-role="container">
                          <div data-role="content">
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-online">
                                    <img src="../../global/portraits/2.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Mary Adams</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                                  </div>
                                  <div class="media-detail">Anyways, i would like just do it</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-off">
                                    <img src="../../global/portraits/3.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Caleb Richards</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                                  </div>
                                  <div class="media-detail">I checheck the document. But there seems</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-busy">
                                    <img src="../../global/portraits/4.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">June Lane</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                                  </div>
                                  <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-away">
                                    <img src="../../global/portraits/5.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Edward Fletcher</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                                  </div>
                                  <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </li>
                      <li class="dropdown-menu-footer" role="presentation">
                        <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                          <i class="icon wb-settings" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0)" role="menuitem">
                        See all messages
                      </a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav navbar-toolbar navbar-right">
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                    role="button">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Action</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Another action</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Something else here</a></li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Separated link</a></li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>
              </div>

              <div class="collapse navbar-search-overlap" id="example-navbar-default-search">
                <form role="search">
                  <div class="form-group">
                    <div class="input-search">
                      <i class="input-search-icon wb-search" aria-hidden="true"></i>
                      <input type="text" class="form-control" name="site-search" placeholder="Search...">
                      <button type="button" class="input-search-close icon wb-close" data-target="#example-navbar-default-search"
                      data-toggle="collapse" aria-label="Close"></button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Default -->

      <!-- Example Inverse -->
      <div class="example-wrap">
        <h4 class="example-title">Inverse</h4>
        <div class="example">
          <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-target="#example-navbar-inverse-collapse" data-toggle="collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <button type="button" class="navbar-toggle collapsed" data-target="#example-navbar-inverse-search"
                data-toggle="collapse">
                  <span class="sr-only">Toggle Search</span>
                  <i class="icon wb-search" aria-hidden="true"></i>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Brand</a>
              </div>
              <ul class="nav navbar-nav hidden-float">
                <li>
                  <a href="javascript:void(0)">
                    <i class="icon wb-grid-4" aria-hidden="true"></i>
                  </a>
                </li>
                <li class="hidden-xs">
                  <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
                    <span class="sr-only">Toggle fullscreen</span>
                  </a>
                </li>
                <li class="hidden-float">
                  <a class="icon wb-search" data-toggle="collapse" href="#example-navbar-inverse-search"
                  role="button">
                    <span class="sr-only">Toggle Search</span>
                  </a>
                </li>
              </ul>
              <div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-inverse-collapse">
                <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                  <li class="dropdown">
                    <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                      <span class="avatar avatar-online">
                        <img src="../../global/portraits/5.jpg" alt="...">
                        <i></i>
                      </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
                      </li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
                      </li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
                      </li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
                    data-animation="slide-bottom" role="button">
                      <i class="icon wb-bell" aria-hidden="true"></i>
                      <span class="badge badge-danger up">5</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                      <li class="dropdown-menu-header" role="presentation">
                        <h5>NOTIFICATIONS</h5>
                        <span class="label label-round label-danger">New 5</span>
                      </li>

                      <li class="list-group" role="presentation">
                        <div data-role="container">
                          <div data-role="content">
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">A new order has been placed</h6>
                                  <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Completed the task</h6>
                                  <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Settings updated</h6>
                                  <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Event started</h6>
                                  <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Message received</h6>
                                  <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </li>
                      <li class="dropdown-menu-footer" role="presentation">
                        <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                          <i class="icon wb-settings" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0)" role="menuitem">
                        All notifications
                      </a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
                    data-animation="slide-bottom" role="button">
                      <i class="icon wb-envelope" aria-hidden="true"></i>
                      <span class="badge badge-info up">3</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                      <li class="dropdown-menu-header" role="presentation">
                        <h5>MESSAGES</h5>
                        <span class="label label-round label-info">New 3</span>
                      </li>

                      <li class="list-group" role="presentation">
                        <div data-role="container">
                          <div data-role="content">
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-online">
                                    <img src="../../global/portraits/2.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Mary Adams</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                                  </div>
                                  <div class="media-detail">Anyways, i would like just do it</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-off">
                                    <img src="../../global/portraits/3.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Caleb Richards</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                                  </div>
                                  <div class="media-detail">I checheck the document. But there seems</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-busy">
                                    <img src="../../global/portraits/4.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">June Lane</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                                  </div>
                                  <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-away">
                                    <img src="../../global/portraits/5.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Edward Fletcher</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                                  </div>
                                  <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </li>
                      <li class="dropdown-menu-footer" role="presentation">
                        <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                          <i class="icon wb-settings" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0)" role="menuitem">
                        See all messages
                      </a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav navbar-toolbar navbar-right">
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                    role="button">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Action</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Another action</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Something else here</a></li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Separated link</a></li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>
              </div>

              <div class="collapse navbar-search-overlap" id="example-navbar-inverse-search">
                <form role="search">
                  <div class="form-group">
                    <div class="input-search">
                      <i class="input-search-icon wb-search" aria-hidden="true"></i>
                      <input type="text" class="form-control" name="site-search" placeholder="Search...">
                      <button type="button" class="input-search-close icon wb-close" data-target="#example-navbar-inverse-search"
                      data-toggle="collapse" aria-label="Close"></button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Inverse -->

      <!-- Example Toolbar -->
      <div class="example-wrap">
        <h4 class="example-title">Toolbar</h4>
        <p>Navbars are responsive meta components that serve as navigation headers
          for your application or site. They begin collapsed (and are toggleable)
          in mobile views and become horizontal as the available viewport width
          increases.</p>
        <p>Justified navbar nav links are currently not supported.</p>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-target="#example-navbar-toolbar-1"
                data-toggle="collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <i class="icon wb-more-horizontal" aria-hidden="true"></i>
                </button>
                <button type="button" class="navbar-toggle collapsed" data-target="#example-navbar-search-1"
                data-toggle="collapse">
                  <span class="sr-only">Toggle Search</span>
                  <i class="icon wb-search" aria-hidden="true"></i>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Brand</a>
              </div>
              <div class="collapse navbar-search navbar-left" id="example-navbar-search-1">
                <form class="navbar-form" role="search">
                  <div class="input-search">
                    <input type="text" class="form-control" placeholder="Search">
                    <button type="button" class="input-search-btn">
                      <i class="icon wb-search" aria-hidden="true"></i>
                    </button>
                  </div>
                </form>
              </div>
              <div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-toolbar-1">
                <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                  <li class="dropdown">
                    <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                      <span class="avatar avatar-online">
                        <img src="../../global/portraits/5.jpg" alt="...">
                        <i></i>
                      </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-user" aria-hidden="true"></i> Profile</a>
                      </li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-payment" aria-hidden="true"></i> Billing</a>
                      </li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-settings" aria-hidden="true"></i> Settings</a>
                      </li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation">
                        <a href="javascript:void(0)" role="menuitem"><i class="icon wb-power" aria-hidden="true"></i> Logout</a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
                    data-animation="slide-bottom" role="button">
                      <i class="icon wb-bell" aria-hidden="true"></i>
                      <span class="badge badge-danger up">5</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                      <li class="dropdown-menu-header" role="presentation">
                        <h5>NOTIFICATIONS</h5>
                        <span class="label label-round label-danger">New 5</span>
                      </li>

                      <li class="list-group" role="presentation">
                        <div data-role="container">
                          <div data-role="content">
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-order bg-red-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">A new order has been placed</h6>
                                  <time class="media-meta" datetime="2016-06-12T20:50:48+08:00">5 hours ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-user bg-green-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Completed the task</h6>
                                  <time class="media-meta" datetime="2016-06-11T18:29:20+08:00">2 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Settings updated</h6>
                                  <time class="media-meta" datetime="2016-06-11T14:05:00+08:00">2 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Event started</h6>
                                  <time class="media-meta" datetime="2016-06-10T13:50:18+08:00">3 days ago</time>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <i class="icon wb-chat bg-orange-600 white icon-circle" aria-hidden="true"></i>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Message received</h6>
                                  <time class="media-meta" datetime="2016-06-10T12:34:48+08:00">3 days ago</time>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </li>
                      <li class="dropdown-menu-footer" role="presentation">
                        <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                          <i class="icon wb-settings" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0)" role="menuitem">
                        All notifications
                      </a>
                      </li>
                    </ul>
                  </li>
                  <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
                    data-animation="slide-bottom" role="button">
                      <i class="icon wb-envelope" aria-hidden="true"></i>
                      <span class="badge badge-info up">3</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                      <li class="dropdown-menu-header" role="presentation">
                        <h5>MESSAGES</h5>
                        <span class="label label-round label-info">New 3</span>
                      </li>

                      <li class="list-group" role="presentation">
                        <div data-role="container">
                          <div data-role="content">
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-online">
                                    <img src="../../global/portraits/2.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Mary Adams</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-17T20:22:05+08:00">30 minutes ago</time>
                                  </div>
                                  <div class="media-detail">Anyways, i would like just do it</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-off">
                                    <img src="../../global/portraits/3.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Caleb Richards</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-17T12:30:30+08:00">12 hours ago</time>
                                  </div>
                                  <div class="media-detail">I checheck the document. But there seems</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-busy">
                                    <img src="../../global/portraits/4.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">June Lane</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-16T18:38:40+08:00">2 days ago</time>
                                  </div>
                                  <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                                </div>
                              </div>
                            </a>
                            <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                              <div class="media">
                                <div class="media-left padding-right-10">
                                  <span class="avatar avatar-sm avatar-away">
                                    <img src="../../global/portraits/5.jpg" alt="..." />
                                    <i></i>
                                  </span>
                                </div>
                                <div class="media-body">
                                  <h6 class="media-heading">Edward Fletcher</h6>
                                  <div class="media-meta">
                                    <time datetime="2016-06-15T20:34:48+08:00">3 days ago</time>
                                  </div>
                                  <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </li>
                      <li class="dropdown-menu-footer" role="presentation">
                        <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                          <i class="icon wb-settings" aria-hidden="true"></i>
                        </a>
                        <a href="javascript:void(0)" role="menuitem">
                        See all messages
                      </a>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav navbar-toolbar navbar-right">
                  <li class="active"><a href="javascript:void(0)">Link <span class="sr-only">(current)</span></a></li>
                  <li><a href="javascript:void(0)">Link</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                    role="button">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Action</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Another action</a></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Something else here</a></li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">Separated link</a></li>
                      <li class="divider" role="presentation"></li>
                      <li role="presentation"><a href="javascript:void(0)" role="menuitem">One more separated link</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Toolbar -->

      <!-- Example Brand Image -->
      <div class="example-wrap">
        <h4 class="example-title">Brand Image</h4>
        <p>Replace the navbar brand with your own image by swapping the text for an
          <code>&lt;img&gt;</code>. Since the <code>.navbar-brand</code> has its
          own padding and height, you may need to override some CSS depending on
          your image.</p>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <a class="navbar-brand" href="javascript:void(0)">
                  <img src="../../global/portraits/1.jpg" alt="Brand" height="20">
                </a>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Brand Image -->

      <!-- Example Brand Center -->
      <div class="example-wrap">
        <h4 class="example-title">Brand Center</h4>
        <p>Add the <code>.navbar-brand-center</code> class to brand elements to center
          the brand in the navbar for mobile views.</p>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <a class="navbar-brand navbar-brand-center" href="javascript:void(0)">
                Brand
              </a>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Brand Center -->

      <!-- Example Search -->
      <div class="example-wrap">
        <h4 class="example-title">Search</h4>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-target="#example-navbar-search"
                data-toggle="collapse">
                  <span class="sr-only">Toggle Search</span>
                  <i class="icon wb-search" aria-hidden="true"></i>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Brand</a>
              </div>
              <div class="collapse navbar-search navbar-left" id="example-navbar-search">
                <form class="navbar-form" role="search">
                  <div class="input-search">
                    <input type="text" class="form-control" placeholder="Search">
                    <button type="button" class="input-search-btn">
                      <i class="icon wb-search" aria-hidden="true"></i>
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Search -->

      <!-- Example Search Overlap -->
      <div class="example-wrap">
        <h4 class="example-title">Search Overlap</h4>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-target="#example-navbar-search-overlap-collapse" data-toggle="collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <button type="button" class="navbar-toggle collapsed" data-target="#example-navbar-search-overlap"
                data-toggle="collapse">
                  <span class="sr-only">Toggle Search</span>
                  <i class="icon wb-search" aria-hidden="true"></i>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Brand</a>
              </div>
              <div class="collapse navbar-collapse" id="example-navbar-search-overlap-collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="javascript:void(0)">Link <span class="sr-only">(current)</span></a></li>
                  <li><a href="javascript:void(0)">Link</a></li>
                  <li class="hidden-float">
                    <a class="icon wb-search" data-toggle="collapse" href="javascript:void(0)" data-target="#example-navbar-search-overlap"
                    role="button">
                      <span class="sr-only">Toggle Search</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="collapse navbar-search-overlap" id="example-navbar-search-overlap">
                <form role="search">
                  <div class="form-group">
                    <div class="input-search">
                      <i class="input-search-icon wb-search" aria-hidden="true"></i>
                      <input type="text" class="form-control" placeholder="Search">
                      <button type="button" class="input-search-close icon wb-close" data-target="#example-navbar-search-overlap"
                      data-toggle="collapse" aria-label="Close"></button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Search Overlap -->

      <!-- Example Buttons -->
      <div class="example-wrap">
        <h4 class="example-title">Buttons</h4>
        <p>Add the <code>.navbar-btn</code> class to <code>&lt;button&gt;</code> elements
          not residing in a <code>&lt;form&gt;</code> to vertically center them
          in the navbar.</p>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-target="#example-navbar-collapse-3" data-toggle="collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Brand</a>
              </div>
              <div class="collapse navbar-collapse" id="example-navbar-collapse-3">
                <button type="submit" class="btn btn-primary navbar-right navbar-btn">Sign in</button>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Buttons -->

      <!-- Example Text -->
      <div class="example-wrap">
        <h4 class="example-title">Text</h4>
        <p>Wrap strings of text in an element with <code>.navbar-text</code>, usually
          on a <code>&lt;p&gt;</code> tag for proper leading and color.</p>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-target="#example-navbar-collapse-4" data-toggle="collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Brand</a>
              </div>
              <div class="collapse navbar-collapse" id="example-navbar-collapse-4">
                <p class="navbar-text">Signed in as Mark Otto</p>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Text -->

      <!-- Example Non Nav Links -->
      <div class="example-wrap">
        <h4 class="example-title">Non-Nav Links</h4>
        <p>For folks using standard links that are not within the regular navbar navigation
          component, use the <code>.navbar-link</code> class to add the proper
          colors for the default and inverse navbar options.</p>
        <div class="example">
          <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-target="#example-navbar-collapse-5" data-toggle="collapse">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Brand</a>
              </div>
              <div class="collapse navbar-collapse" id="example-navbar-collapse-5">
                <p class="navbar-text navbar-right">Signed in as <a class="navbar-link" href="javascript:void(0)">Mark Otto</a></p>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Non Nav Links -->

      <!-- Example Mega Navbar -->
      <div class="example-wrap">
        <h4 class="example-title">Mega Navbar</h4>
        <div class="example">
          <div class="navbar navbar-default navbar-mega">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-toggle="collapse" data-target="#navbar-collapse-1">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Mega Menu</a>
              </div>
              <div class="navbar-collapse collapse" id="navbar-collapse-1">
                <ul class="nav navbar-nav">
                  <!-- Classic List -->
                  <li class="dropdown dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">List<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <!-- Content Container To Add Padding -->
                        <div class="mega-content">
                          <div class="row">
                            <div class="col-xs-6 col-md-3 mega-menu">
                              <h5>Section Title</h5>
                              <ul class="list-icons">
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                              </ul>
                            </div>
                            <div class="col-xs-6 col-md-3 mega-menu">
                              <h5>Links Title</h5>
                              <ul class="list-icons">
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                  <a
                                  href="javascript:void(0)"> Link Item </a>
                                </li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                  <a
                                  href="javascript:void(0)"> Link Item </a>
                                </li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                  <a
                                  href="javascript:void(0)"> Link Item </a>
                                </li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                  <a
                                  href="javascript:void(0)"> Link Item </a>
                                </li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                  <a
                                  href="javascript:void(0)"> Link Item </a>
                                </li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                  <a
                                  href="javascript:void(0)"> Link Item </a>
                                </li>
                              </ul>
                            </div>
                            <div class="col-xs-6 col-md-3 mega-menu">
                              <h5>Section Title</h5>
                              <ul class="list-icons">
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                              </ul>
                            </div>
                            <div class="col-xs-6 col-md-3 mega-menu">
                              <h5>Section Title</h5>
                              <ul class="list-icons">
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>List
                                  Item</li>
                                <li>
                                  <ul class="list-icons">
                                    <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                      <a
                                      href="javascript:void(0)"> Link Item </a>
                                    </li>
                                    <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                      <a
                                      href="javascript:void(0)"> Link Item </a>
                                    </li>
                                    <li><i class="wb-chevron-right-mini" aria-hidden="true"></i>
                                      <a
                                      href="javascript:void(0)"> Link Item </a>
                                    </li>
                                  </ul>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <!-- Accordion Demo -->
                  <li class="dropdown dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Accordion<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <div class="mega-content">
                          <!-- Accordion -->
                          <div class="panel-group" id="exampleMegaAccordion" aria-multiselectable="true"
                          role="tablist">
                            <div class="panel">
                              <div class="panel-heading" id="exampleMegaAccordionHeadingOne" role="tab">
                                <a class="panel-title" data-toggle="collapse" href="#exampleMegaCollapseOne" data-parent="#exampleMegaAccordion"
                                aria-expanded="true" aria-controls="exampleMegaCollapseOne">
                                Collapsible Group Item #1
                              </a>
                              </div>
                              <div class="panel-collapse collapse in" id="exampleMegaCollapseOne" aria-labelledby="exampleMegaAccordionHeadingOne"
                              role="tabpanel">
                                <div class="panel-body">
                                  De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                                  congressus ostendit alienae, voluptati ornateque
                                  accusamus clamat reperietur convicia albucius,
                                  veniat quocirca vivendi aristotele errorem epicurus.
                                  Suppetet. Aeternum animadversionis, turbent cn
                                  partem porrecta c putamus diceret decore. Vero
                                  itaque incursione.
                                </div>
                              </div>
                            </div>
                            <div class="panel">
                              <div class="panel-heading" id="exampleMegaAccordionHeadingTwo" role="tab">
                                <a class="panel-title collapsed" data-toggle="collapse" href="#exampleMegaCollapseTwo"
                                data-parent="#exampleMegaAccordion" aria-expanded="false"
                                aria-controls="exampleMegaCollapseTwo">
                                Collapsible Group Item #2
                              </a>
                              </div>
                              <div class="panel-collapse collapse" id="exampleMegaCollapseTwo" aria-labelledby="exampleMegaAccordionHeadingTwo"
                              role="tabpanel">
                                <div class="panel-body">
                                  Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                                  loco ignavi, credo videretur multoque choro fatemur
                                  mortis animus adoptionem, bello statuat expediunt
                                  naturales frequenter terminari nomine, stabilitas
                                  privatio initia paranda contineri abhorreant,
                                  percipi dixerit incurreret deorsum imitarentur
                                  tenetur antiopam latinam haec.
                                </div>
                              </div>
                            </div>

                            <div class="panel">
                              <div class="panel-heading" id="exampleMegaAccordionHeadingThree" role="tab">
                                <a class="panel-title collapsed" data-toggle="collapse" href="#exampleMegaCollapseThree"
                                data-parent="#exampleMegaAccordion" aria-expanded="false"
                                aria-controls="exampleMegaCollapseThree">
                                Collapsible Group Item #3
                              </a>
                              </div>
                              <div class="panel-collapse collapse" id="exampleMegaCollapseThree" aria-labelledby="exampleMegaAccordionHeadingThree"
                              role="tabpanel">
                                <div class="panel-body">
                                  Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                                  suscipere. Desiderat magnum, contenta poena desiderant
                                  concederetur menandri damna disputandum corporum
                                  equidem cyrenaicisque. Defuturum ultimum ista
                                  ignaviamque iudicant feci incursione, reprimique
                                  fruenda utamur tu faciam complexiones eo, habeo
                                  ortum iucundo artes.
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Accordion -->
                        </div>
                      </li>
                    </ul>
                  </li>
                  <!-- Classic Dropdown -->
                  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Classic<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li><a tabindex="-1" href="javascript:void(0)"> Action </a></li>
                      <li><a tabindex="-1" href="javascript:void(0)"> Another action </a></li>
                      <li><a tabindex="-1" href="javascript:void(0)"> Something else here </a></li>
                      <li class="divider" role="presentation"></li>
                      <li><a tabindex="-1" href="javascript:void(0)"> Separated link </a></li>
                    </ul>
                  </li>
                  <!-- Pictures -->
                  <li class="dropdown dropdown-fw dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Pictures<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <div class="mega-content">
                          <div class="row">
                            <div class="col-xs-6 col-sm-3">
                              <a class="thumbnail" href="javascript:void(0)">
                                <img alt="..." src="../../global/photos/view-1-150x100.jpg">
                              </a>
                            </div>
                            <div class="col-xs-6 col-sm-3">
                              <a class="thumbnail" href="javascript:void(0)">
                                <img alt="..." src="../../global/photos/view-2-150x100.jpg">
                              </a>
                            </div>
                            <div class="col-xs-6 col-sm-3">
                              <a class="thumbnail" href="javascript:void(0)">
                                <img alt="..." src="../../global/photos/view-3-150x100.jpg">
                              </a>
                            </div>
                            <div class="col-xs-6 col-sm-3">
                              <a class="thumbnail" href="javascript:void(0)">
                                <img alt="..." src="../../global/photos/view-4-150x100.jpg">
                              </a>
                            </div>
                            <div class="col-xs-6 col-sm-3">
                              <a class="thumbnail" href="javascript:void(0)">
                                <img alt="..." src="../../global/photos/view-5-150x100.jpg">
                              </a>
                            </div>
                            <div class="col-xs-6 col-sm-3">
                              <a class="thumbnail" href="javascript:void(0)">
                                <img alt="..." src="../../global/photos/view-6-150x100.jpg">
                              </a>
                            </div>
                            <div class="col-xs-6 col-sm-3">
                              <a class="thumbnail" href="javascript:void(0)">
                                <img alt="..." src="../../global/photos/view-7-150x100.jpg">
                              </a>
                            </div>
                            <div class="col-xs-6 col-sm-3">
                              <a class="thumbnail" href="javascript:void(0)">
                                <img alt="..." src="../../global/photos/view-8-150x100.jpg">
                              </a>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Example Mega Navbar -->

      <!-- Example Mega Navbar -->
      <div class="example-wrap">
        <h4 class="example-title">More Components</h4>
        <div class="example">
          <nav class="navbar navbar-default navbar-mega">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-toggle="collapse" data-target="#navbar-collapse-2">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Mega Menu</a>
              </div>
              <div class="navbar-collapse collapse" id="navbar-collapse-2">
                <ul class="nav navbar-nav">
                  <!-- Media Example -->
                  <li class="dropdown dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Media<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <div class="mega-content">
                          <ul class="media-list">
                            <li class="media">
                              <div class="media-left">
                                <a class="avatar avatar-lg" href="javascript:void(0)">
                                  <img src="../../global/portraits/2.jpg" alt="...">
                                </a>
                              </div>
                              <div class="media-body">
                                <h4 class="media-heading">Media Heading</h4>
                                Lorem ipsum In laboris ullamco cupidatat commodo eiusmod laboris do cupidatat irure
                                in anim Excepteur eiusmod eiusmod nostrud dolor
                                dolore laboris deserunt sed irure laborum ex occaecat
                                reprehenderit sit esse veniam minim veniam cupidatat
                                voluptate sunt ullamco dolore et ex commodo in.
                              </div>
                            </li>
                            <li class="media">
                              <div class="media-left">
                                <a class="avatar avatar-lg" href="javascript:void(0)">
                                  <img src="../../global/portraits/3.jpg" alt="...">
                                </a>
                              </div>
                              <div class="media-body">
                                <h4 class="media-heading">Nested Media Heading</h4>
                                Lorem ipsum Laborum deserunt culpa mollit sunt in nostrud aliquip sed magna consequat
                                fugiat eiusmod do consectetur est irure consectetur
                                dolore velit tempor adipisicing occaecat eu ea
                                esse cillum nostrud amet in commodo laborum Ut
                                exercitation consectetur dolore.
                              </div>
                            </li>
                          </ul>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <!-- Tables -->
                  <li class="dropdown dropdown-fw dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Tables<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <div class="mega-content table-responsive">
                          <table class="table table-hover">
                            <thead>
                              <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                              </tr>
                            </thead>
                            <tbody>
                              <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                              </tr>
                              <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                              </tr>
                              <tr>
                                <td>3</td>
                                <td colspan="2">Larry the Bird</td>
                                <td>@twitter</td>
                                <td colspan="2">Larry the Bird</td>
                                <td>@twitter</td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <!-- Thumbnails Demo -->
                  <li class="dropdown dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Thumbnails<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <div class="mega-content">
                          <div class="row">
                            <div class="col-lg-4">
                              <div class="thumbnail">
                                <img class="width-full" src="../../global/photos/focus-1-480x320.jpg" alt="...">
                                <div class="caption">
                                  <h4>Thumbnail Label</h4>
                                  <p>Lorem ipsum Dolore nulla mollit consectetur enim
                                    est adipisicing dolor exercitation.</p>
                                  <p><a class="btn btn-primary" href="javascript:void(0)"
                                    role="button">Button</a><a class="btn btn-default"
                                    href="javascript:void(0)" role="button">Button</a></p>
                                </div>
                              </div>
                            </div>
                            <div class="col-lg-4">
                              <div class="thumbnail">
                                <img class="width-full" src="../../global/photos/focus-2-480x320.jpg" alt="...">
                                <div class="caption">
                                  <h4>Thumbnail Label</h4>
                                  <p>Lorem ipsum Minim in in Ut officia cupidatat
                                    sed elit do cillum in dolore aliquip.</p>
                                  <p><a class="btn btn-primary" href="javascript:void(0)"
                                    role="button">Button</a><a class="btn btn-default"
                                    href="javascript:void(0)" role="button">Button</a></p>
                                </div>
                              </div>
                            </div>
                            <div class="col-lg-4">
                              <div class="thumbnail">
                                <img class="width-full" src="../../global/photos/focus-3-480x320.jpg" alt="...">
                                <div class="caption">
                                  <h4>Thumbnail Label</h4>
                                  <p>Lorem ipsum Labore laborum nisi ex et ullamco
                                    in anim enim minim anim id in sed dolor.</p>
                                  <p><a class="btn btn-primary" href="javascript:void(0)"
                                    role="button">Button</a><a class="btn btn-default"
                                    href="javascript:void(0)" role="button">Button</a></p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  <!-- Forms -->
                  <li class="dropdown dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Forms<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li>
                        <div class="mega-content">
                          <form action="send.php">
                            <div class="form-group">
                              <input type="text" class="form-control" id="inputName" placeholder="Name">
                            </div>
                            <div class="form-group">
                              <input type="password" class="form-control" id="inputEmail" placeholder="Email">
                            </div>
                            <div class="form-group">
                              <textarea class="form-control" placeholder="Write your message.."></textarea>
                            </div>
                            <div class="form-group">
                              <button type="submit" class="btn btn-success">Send</button>
                            </div>
                          </form>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Mega Navbar -->

      <!-- Example Mega Navbar -->
      <div class="example-wrap">
        <h4 class="example-title">Grid Example</h4>
        <div class="example">
          <nav class="navbar navbar-default navbar-mega">
            <div class="container-fluid">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                data-toggle="collapse" data-target="#navbar-collapse-grid">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="hamburger-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:void(0)">Mega Menu</a>
              </div>
              <div class="navbar-collapse collapse" id="navbar-collapse-grid">
                <ul class="nav navbar-nav">
                  <!-- Grid 12 Menu -->
                  <li class="dropdown dropdown-fw dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Grid<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li class="example-grid">
                        <div class="row">
                          <div class="col-sm-12">
                            <div class="example-col">.col-sm-12</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <div class="example-col">.col-sm-6</div>
                          </div>
                          <div class="col-sm-6">
                            <div class="example-col">.col-sm-6</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-4">
                            <div class="example-col">.col-sm-4</div>
                          </div>
                          <div class="col-sm-4">
                            <div class="example-col">.col-sm-4</div>
                          </div>
                          <div class="col-sm-4">
                            <div class="example-col">.col-sm-4</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                          <div class="col-sm-3">
                            <div class="example-col">.col-sm-3</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                          <div class="col-sm-1">
                            <div class="example-col">.col-sm-1</div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <!-- With Offsets -->
                  <li class="dropdown dropdown-fw dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Offset<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li class="example-grid">
                        <div class="row">
                          <div class="col-md-4">
                            <div class="example-col">.col-md-4</div>
                          </div>
                          <div class="col-md-4 col-md-offset-4">
                            <div class="example-col">.col-md-4 .col-md-offset-4</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-3 col-md-offset-3">
                            <div class="example-col">.col-md-3 .col-md-offset-3</div>
                          </div>
                          <div class="col-md-3 col-md-offset-3">
                            <div class="example-col">.col-md-3 .col-md-offset-3</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-6 col-md-offset-3">
                            <div class="example-col">.col-md-6 .col-md-offset-3</div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <!-- Aside Menu -->
                  <li class="dropdown dropdown-fw dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Aside<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li class="example-grid">
                        <div class="row">
                          <div class="col-sm-3">
                            <div class="example-col">3</div>
                          </div>
                          <div class="col-sm-9">
                            <div class="example-col">9</div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                  <!-- Nesting Menu -->
                  <li class="dropdown dropdown-fw dropdown-mega"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Nesting<b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                      <li class="example-grid">
                        <div class="row">
                          <div class="col-sm-12">
                            <div class="example-col">12</div>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-12">
                            <div class="example-col">12
                              <div class="row">
                                <div class="col-sm-4">
                                  <div class="example-col">4</div>
                                </div>
                                <div class="col-sm-4">
                                  <div class="example-col">4</div>
                                </div>
                                <div class="col-sm-4">
                                  <div class="example-col">4</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </div>
      </div>
      <!-- End Example Mega Navbar -->

      <!-- Panel -->
      <div class="panel">
        <div class="panel-body container-fluid">
          <div class="row">
            <div class="col-sm-6">
              <!-- Example Fixed To Top -->
              <div class="example-wrap">
                <h4>Fixed To Top</h4>
                <p>Add <code>.navbar-fixed-top</code> and include a <code>.container</code>                  or <code>.container-fluid</code> to center and pad navbar content.</p>
                <div class="example example-well height-400">
                  <img class="img-responsive center" src="../assets/examples/images/navbar/fixed-to-top.png"
                  alt="...">
                </div>
              </div>
              <!-- End Example Fixed To Top -->
            </div>

            <div class="col-sm-6">
              <!-- Example Fixed To Bottom -->
              <div class="example-wrap">
                <h4>Fixed To Bottom</h4>
                <p>Add <code>.navbar-fixed-bottom</code> and include a <code>.container</code>                  or <code>.container-fluid</code> to center and pad navbar content.</p>
                <div class="example example-well height-400">
                  <img class="img-responsive center" src="../assets/examples/images/navbar/fixed-to-bottom.png"
                  alt="...">
                </div>
              </div>
              <!-- End Example Fixed To Bottom -->
            </div>
          </div>

          <div class="row">
            <div class="col-sm-12">
              <h4>Scrollspy</h4>
              <div class="example">
                <nav class="navbar navbar-inverse margin-bottom-0" id="navbar-example" role="navigation">
                  <div class="container-fluid">
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
                      data-target="#example-navbar-collapse-6" data-toggle="collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="hamburger-bar"></span>
                      </button>
                      <a class="navbar-brand" href="javascript:void(0)">ScrollSpy</a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse-6">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#home">Home</a></li>
                        <li><a href="#link">Link</a></li>
                        <li class="dropdown">
                          <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                          role="button">Dropdown <span class="caret"></span></a>
                          <ul class="dropdown-menu" role="menu">
                            <li><a href="#action">Action</a></li>
                            <li><a href="#another-action">Another action</a></li>
                            <li class="divider" role="presentation"></li>
                            <li><a href="#something-else-here">Something else here</a></li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                  </div>
                </nav>
                <div class="scrollspy-example" data-offset="0" data-target="#navbar-example" data-spy="scroll">
                  <h4 id="home">Home</h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork
                    yr enim lo-fi before they sold out qui. Tumblr farm-to-table
                    bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
                    seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater
                    lomo jean shorts, williamsburg hoodie minim qui you probably
                    haven't heard of them et cardigan trust fund culpa biodiesel
                    wes anderson aesthetic. Nihil tattooed accusamus, cred irony
                    biodiesel keffiyeh artisan ullamco consequat.</p>
                  <h4 id="link">Link</h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork
                    yr enim lo-fi before they sold out qui. Tumblr farm-to-table
                    bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
                    seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater
                    lomo jean shorts, williamsburg hoodie minim qui you probably
                    haven't heard of them et cardigan trust fund culpa biodiesel
                    wes anderson aesthetic. Nihil tattooed accusamus, cred irony
                    biodiesel keffiyeh artisan ullamco consequat.</p>
                  <h4 id="action">Action</h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork
                    yr enim lo-fi before they sold out qui. Tumblr farm-to-table
                    bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
                    seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater
                    lomo jean shorts, williamsburg hoodie minim qui you probably
                    haven't heard of them et cardigan trust fund culpa biodiesel
                    wes anderson aesthetic. Nihil tattooed accusamus, cred irony
                    biodiesel keffiyeh artisan ullamco consequat.</p>
                  <h4 id="another-action">Another Action</h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork
                    yr enim lo-fi before they sold out qui. Tumblr farm-to-table
                    bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
                    seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater
                    lomo jean shorts, williamsburg hoodie minim qui you probably
                    haven't heard of them et cardigan trust fund culpa biodiesel
                    wes anderson aesthetic. Nihil tattooed accusamus, cred irony
                    biodiesel keffiyeh artisan ullamco consequat.</p>
                  <h4 id="something-else-here">Something Else Here</h4>
                  <p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork
                    yr enim lo-fi before they sold out qui. Tumblr farm-to-table
                    bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
                    seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater
                    lomo jean shorts, williamsburg hoodie minim qui you probably
                    haven't heard of them et cardigan trust fund culpa biodiesel
                    wes anderson aesthetic. Nihil tattooed accusamus, cred irony
                    biodiesel keffiyeh artisan ullamco consequat.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End Panel -->

      <h4>Colors</h4>
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-6">
            <div class="example">
              <nav class="navbar navbar-default" role="navigation">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle hamburger hamburger-close collapsed">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="hamburger-bar"></span>
                    </button>
                    <a class="navbar-brand" href="javascript:void(0)">Brand</a>
                  </div>
                </div>
              </nav>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="example">
              <nav class="navbar navbar-inverse bg-blue-grey-700" role="navigation">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle hamburger hamburger-close collapsed">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="hamburger-bar"></span>
                    </button>
                    <a class="navbar-brand" href="javascript:void(0)">Brand</a>
                  </div>
                </div>
              </nav>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="example">
              <nav class="navbar navbar-inverse bg-blue-600" role="navigation">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle hamburger hamburger-close collapsed">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="hamburger-bar"></span>
                    </button>
                    <a class="navbar-brand" href="javascript:void(0)">Brand</a>
                  </div>
                </div>
              </nav>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="example">
              <nav class="navbar navbar-inverse bg-teal-600" role="navigation">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <button type="button" class="navbar-toggle hamburger hamburger-close collapsed">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="hamburger-bar"></span>
                    </button>
                    <a class="navbar-brand" href="javascript:void(0)">Brand</a>
                  </div>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Page -->


  <!-- Footer -->
  <footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
      Crafted with <i class="red-600 wb wb-heart"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
  </footer>
  <!-- Core  -->
  <script src="../../global/vendor/jquery/jquery.min.js"></script>
  <script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
  <script src="../../global/vendor/animsition/animsition.min.js"></script>
  <script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
  <script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
  <script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
  <script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>

  <!-- Plugins -->
  <script src="../../global/vendor/switchery/switchery.min.js"></script>
  <script src="../../global/vendor/intro-js/intro.min.js"></script>
  <script src="../../global/vendor/screenfull/screenfull.min.js"></script>
  <script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

  <!-- Scripts -->
  <script src="../../global/js/core.min.js"></script>
  <script src="../assets/js/site.min.js"></script>

  <script src="../assets/js/sections/menu.min.js"></script>
  <script src="../assets/js/sections/menubar.min.js"></script>
  <script src="../assets/js/sections/gridmenu.min.js"></script>
  <script src="../assets/js/sections/sidebar.min.js"></script>

  <script src="../../global/js/configs/config-colors.min.js"></script>
  <script src="../assets/js/configs/config-tour.min.js"></script>

  <script src="../../global/js/components/asscrollable.min.js"></script>
  <script src="../../global/js/components/animsition.min.js"></script>
  <script src="../../global/js/components/slidepanel.min.js"></script>
  <script src="../../global/js/components/switchery.min.js"></script>


  <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
      });
    })(document, window, jQuery);
  </script>



</body>

</html>